<template>
    <div class="main-cantainer">
        <!-- 顶部导航 -->

        <div class="aside_top">
            <!-- 展开、收起 -->
            <span  
                class="iconfont toggleNavCollapse"
                :class="{ active: state.isSidebarNavCollapse }"
                @click="toggleNavCollapse"
            ><el-icon><Fold /></el-icon>
            </span>
            <!-- 面包屑 -->
            <el-breadcrumb separator=">">
                <transition-group name="breadcrumb">
                    <!-- 防止面包屑导航出现 首页/首页， v-if="route.name!='home'" -->
                    <el-breadcrumb-item
                        v-for="(route, i) in state.crumbList"
                        :key="route.name"
                        :to="{ name: route.name }"
                        :class="{
                            'is-last-link': i == state.crumbList.length - 1,
                        }"
                    >
                        <span v-if="route.name != 'home'">{{
                            route.meta.name
                        }}</span>
                    </el-breadcrumb-item>
                </transition-group>
            </el-breadcrumb>

            <!-- 右侧内容 -->
            <div class="aside_top_right">
                <div class="full" @click="full" title="全屏展示">
                    <span class="icons"><el-icon color="#262728" :size="30"><Rank /></el-icon></span>
                </div>
                <div class="">
                    <el-badge :value="state.msgNum" class="item">
                        <div>
                            <span class="icons">
                            <el-icon :size="30"><Bell /></el-icon>
                            </span>
                        </div>
                    </el-badge>
                </div>
                <div>
                    <el-avatar>王</el-avatar>
                </div>
                <div class="full"  @click="loginOut">
                    <span class="icons">
                    <el-icon  :size="30"><SwitchButton /></el-icon>
                    </span>
                </div>
            </div>
            <!-- tags内容 -->
            <TagsView class="tagsView"></TagsView>

        </div>
        <!-- 内容容器 -->
        <router-view></router-view>
    </div>
</template>

<script lang="ts" setup>
import {useStore} from "vuex";
import { defineComponent, reactive ,computed, ref} from "vue";
import { useRouter } from "vue-router";
import MENU from "./navMenu.vue";
import TagsView from './tagsView/index.vue'
import screenfull from "screenfull";


const store = useStore();
const router = useRouter();
let state: any = reactive({
    crumbList: computed(() => store.getters.getCrumbList),
    isSidebarNavCollapse: computed(
        () => store.getters.getIsSidebarNavCollapse
    ),
    msgNum: computed(() => store.getters.getMsgNum),
});
let toggleNavCollapse = () => {
    store.commit("toggleNavCollapse");
};
const full = () => {
    screenfull.isEnabled && screenfull.toggle();
};

let loginOut = () => {
    router.go(0);
    window.localStorage.removeItem("token");
    router.replace({ path: "/login" });
};
</script>

<style lang="scss" scoped>
.aside_top{
    border-bottom: 1px solid #e5e5e5;
    height: 80px;
    position: fixed;
    left: 210px;
    top: 0;
    right: 0;
    background: #fff;
    z-index: 1000;
    transition: left 0.25s;
    .toggleNavCollapse {
        display: inline-block;
        margin-left: 8px;
        padding: 0 10px;
        font-size: 26px;
        vertical-align: middle;
        color: #333;
        cursor: pointer;
        transition: all 0.5s;
        line-height: 50px;
        &.active {
            transform: rotate(180deg);
        }
    }
    .aside_top_right{
        position: absolute;
        right: 10px;
        top: -1px;
        bottom: 0px;
        > div {
            // height: 100%;
            position: relative;
            float: left;
            text-align: center;
            padding: 0 30px;
            cursor: pointer;
            overflow: hidden;
            &:hover::after {
                transform-origin: 0 0;
                transform: scaleX(1);
            }
            &:first-child:before {
                border: none;
            }
            &::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 2px;
                background: #ef4747;
                transform: scaleX(0);
                transform-origin: right 0;
                transition: transform 0.5s;
            }
            &::before {
                content: "";
                position: absolute;
                height: 20px;
                top: 50%;
                left: 0;
                margin-top: -10px;
                border-left: 1px solid #ccc;
            }
            &.full{
                .icons{
                    // position: absolute;
                    // top: 10px;
                    display: inline-block;
                    margin-top: 10px;
                }
            }
        }
    }
    .tagsView{
        line-height: 30px;
    }
}
.item {
  margin-top: 10px;
}
.el-dropdown {
  margin-top: 1.1rem;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
    opacity: 0;
    transform: translateX(20px);
}

.breadcrumb-enter-active,
.breadcrumb-leave-active {
    transition: all 0.6s;
}

.breadcrumb-leave-active {
    position: absolute;
}
</style>